<template>
	<view>
		<view id="chart-type-fifteen-line" style="width:100%;height:180px" v-if="weekIndex===0" />
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	import {
		init,
		dispose,
		registerIndicator,
		getFigureClass,
		registerStyles,
		registerXAxis
	} from 'klinecharts'
	import * as echarts from 'echarts';

	export default {
		props: {
			pageLineType: String
		},
		data() {
			return {
				mainIndex: 0,

				option: {

				},
				globalBgMode: 'light',

				mainIndicators: ["MA", "BOLL", "SAR"],
				subIndicoators: [{
					name: 'VOL',
					check: true
				}, {
					name: 'MACD',
					check: true
				}, {
					name: 'KDJ',
					check: true
				}, {
					name: 'RSI',
					check: false
				}, {
					name: 'WR',
					check: false
				}, {
					name: 'VR',
					check: false
				}, {
					name: 'CCI',
					check: false
				}, {
					name: 'BIAS',
					check: false
				}, {
					name: 'DMA',
					check: false
				}, {
					name: 'MTM',
					check: false
				}],
				dataSource: null,
				weekIndex: 0

			}
		},

		onLoad() {

		},
		onHide() {
			// dispose('chart')
		},
		onShow() {
			this.$nextTick(() => {
				this.initFifteen()
			})

		},
		onReady() {

		},

		methods: {
			minChartFn() {
				this.kLineChart = init("chart-type-fifteen-line");
				this.kLineChart.applyNewData(this.dataSource.chart_data);
				console.log(this.kLineChart.getStyles(), 'style');
				this.kLineChart.setMaxOffsetLeftDistance(10);
				this.kLineChart.setMaxOffsetRightDistance(20);

				this.kLineChart.setStyles({
					candle: {
						type: 'area',
						tooltip: {
							offsetBottom: {

							},
							custom: [],
							text: {
								size: 8
							}
						},
						priceMark: {

						}
					},

					indicator: {
						lastValueMark: {

							show: false
						},
						tooltip: {

							offsetTop: 5,
							offsetLeft: 3,
							offsetRight: 1,
							text: {
								size: 10,
								color: "#000"
							}
						}
					}
				});
				// this.kLineChart.createIndicator('MA');
				this.kLineChart.createIndicator('MA', false, {
					id: 'candle_pane'
				});
				

				this.kLineChart.setPaneOptions({
					id: paneId,
					axis: {
						// reverse:true,
						gap: {
							top: 100
						},

					},

					// dragEnabled: true
					// height: 00
				})
				
				this.kLineChart.convertFromPixel(
					[{
						x: 200,
						y: 200
					}], {
						paneId: 'candle_pane',
						absolute: false
					}
				);
				console.log(this.kLineChart.getPaneOptions());
			},
			setMainIndicator: function(name, index) {
				this.mainIndex = index;

				this.paneId = this.chart.createIndicator(name, false, {
					id: "candle_pane"
				});
			},
			tabTime(e) {

				this.weekIndex = e.index;
				console.log(this.weekIndex, 'this.weekIndex');
				if (this.weekIndex === 0) {
					this.initWebSocket()
				} else if (this.weekIndex === 1) {
					this.$nextTick(() => {

						this.$refs.fivdayRef.getfiveday()
					})

				}

			},
			
			initFifteen() {
				var that = this
				uni.request({
					url: 'http://103.214.167.178:9999/manager/transaction/kline/getKlineDataForM30?type=' + this
						.pageLineType,
					method: 'get',
					success(res) {

						that.dataSource = res.data.data;

						// that.dataSource = JSON.parse(that.dataSource)
						that.minChartFn()
						// console.log(this.dataSource, 'this.dataSource ')
						// this.kLineChart.createIndicator("KDJ");
						// this.kLineChart.createIndicator("VOL");
						// this.kLineChart.createIndicator("RSI");
						// this.kLineChart.applyNewData(this.dataSource.chart_data)
						// this.chart.zoomAtCoordinate(0.8, { x: 150, y: 150 }, 200);
						that.kLineChart.resize();
					}
				})





			},
		}
	}
</script>

<style>
	@import '../pages/index/line.css'
</style>